<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-24 17:06:00
 * @LastEditTime: 2023-06-29 17:01:30
-->
<script lang="ts" setup name="NodeConfig">
import { computed, ref } from 'vue'
import OrgItems from '@main/views/approve-workflow/WorkFlow/OrgItems.vue'
import { Plus } from '@element-plus/icons-vue'
import { IkingPicker } from 'iking-web-ui'
import BaseTitle from './BaseTitle.vue'
const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const select = computed({
  get() {
    return props.config.assignedUser || []
  },
  set(val) {
    props.config.assignedUser = val
  }
})

const { baseUrl } = useHttpUrl()
const token = useToken()

const orgPicker = ref(false)
const selectOrg = () => {
  orgPicker.value = true
}
// const selected = (sel: any) => {
//   select.value = [...select.value, ...sel]
// }
// const removeOrgItem = (index: number) => {
//   select.value.splice(index, 1)
// }
</script>

<template>
  <BaseTitle title="指定成员" sub-title="可抄送成员" />
  <el-button
    :icon="Plus"
    type="primary"
    @click="selectOrg"
  >
    选择抄送人
  </el-button>
  <OrgItems v-model="select" />

  <BaseTitle
    title="申请人自选"
    class="mt-[20px]"
    sub-title="申请人自行选择抄送人"
  />
  <div class="option">
    <el-checkbox
      v-model="config.shouldAdd"
      label="允许发起人自选抄送人"
    />
  </div>

  <IkingPicker
    ref="refIkingPicker"
    v-model="select"
    v-model:show="orgPicker"
    :api="{
      methods: 'post',
      url: `${baseUrl}/server/component/pick/mix`,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': token,
      },
    }"
    :choose-type="['user']"
    :tabs="['group', 'post', 'role']"
    :type-option="{
      dep: 'DEPT',
      user: 'USER',
      role: 'ROLE',
      post: 'POST',
    }"
    :prop-option="{
      name: 'elementName',
      id: 'elementId',
      type: 'elementType',
    }"
  />
</template>

<style lang="scss" scoped>
.option {
  color: #606266;
  margin-top: 8px;
  font-size: small;
}

.org-item {
  margin: 5px;
}
</style>
